<template>
  <div>
    <!-- 深加工信息 -->
    <div style="margin-bottom: 40px;">
      <div>
        <span style="color: #3791EB;">深加工信息</span>
        <el-button plain style="background-color: #F2F2F2;margin-left: 18px;width: 90px;margin-bottom: 15px;"
          @click="dialogDeep()">设置</el-button>
        <hr>
      </div>
      <div>
        <table>
          <tr>
            <td style="width: 300px;">公司名称 : {{ AddformDeep.deepLeaderName }}</td>
            <td>负责人 : {{ AddformDeep.deppChargeName }}</td>
          </tr>
        </table>
      </div>
      <!-- 深加工信息设置弹框 -->
      <div>
        <el-dialog v-model="dialogFormDeep" title="深加工信息" width="500" draggable="true">
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="AddformDeep" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="班组" prop="deepLeaderName">
              <el-input v-model="AddformDeep.deepLeaderName" show-word-limit maxlength="30" />
            </el-form-item>
            <el-form-item label="负责人" prop="deppChargeName">
              <el-input v-model="AddformDeep.deppChargeName" show-word-limit maxlength="30" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
              </el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
    <!-- 食品安全信息 -->
    <div style="margin-bottom: 40px;">
      <div>
        <span style="color: #3791EB;">食品安全信息</span>
        <hr>
        <el-upload v-model:file-list="fileListfood" action="https://localhost:7281/api/UploadTuPian"
          list-type="picture-card" :on-preview="handlePictureCardPreview" @change="addTestModel.pTyper = 6"
          :on-remove="handleRemove" :on-success="handleAvatarSuccess" class="aaimg">
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisible" class="imgyl">
          <img w-full :src="dialogImageUrl" alt="Preview Image" class="imgyll" />
        </el-dialog>
      </div>
    </div>
    <!-- 供应商信息 -->
    <div style="margin-bottom: 40px;">
      <div>
        <span style="color: #3791EB;">供应商信息</span>
        <hr>
        <!-- 原料 -->
        <div>
          <table>
            <tr>
              <td>
                <span style="font-size: 13px;">原料</span>
              </td>
              <td>
                <el-button plain style="background-color: #F2F2F2;margin-left: 18px;width: 90px;margin-bottom: 15px;"
                  @change="statu = 1" @click="dialogSupp()">设置</el-button>
              </td>
            </tr>
            <tr>
              <td>生产批次:</td>
              <td v-for="item in Suppelist">
                <span v-if="item.suppType == '原料'">{{ item.suppBatch }}</span>
              </td>
            </tr>
            <tr>
              <td>
                <span style="font-size: 14px;">相关材料</span>
              </td>
            </tr>
          </table>
          <hr>
          <!-- 原料添加相关材料 -->
          <el-upload v-model:file-list="fileList7" action="https://localhost:7281/api/UploadTuPian"
            list-type="picture-card" :on-preview="handlePictureCardPreview" @change="addTestModel.pTyper = 7"
            :on-remove="handleRemove7" :on-success="handleAvatarSuccess" class="aaimg">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible" class="imgyl">
            <img w-full :src="dialogImageUrl" alt="Preview Image" class="imgyll" />
          </el-dialog>
        </div>
        <!-- 辅料 -->
        <div>
          <table>
            <tr>
              <td>
                <span style="font-size: 13px;">辅料</span>
              </td>
              <td>
                <el-button plain style="background-color: #F2F2F2;margin-left: 18px;width: 90px;margin-bottom: 15px;"
                  @change="statu = 2" @click="dialogSupp(aas = 2)">设置</el-button>
              </td>
            </tr>
            <tr>
              <td>生产批次:</td>
              <td v-for="item in Suppelist">
                <span v-if="item.suppType == '辅料'">
                  {{ item.suppBatch }}
                </span>
              </td>
            </tr>
            <tr>
              <td>
                <span style="font-size: 14px;">相关材料</span>
              </td>
            </tr>
          </table>
          <hr>
          <!-- 添加剂添加相关材料 -->
          <el-upload v-model:file-list="fileList8" action="https://localhost:7281/api/UploadTuPian"
            list-type="picture-card" :on-preview="handlePictureCardPreview" @change="addTestModel.pTyper = 8"
            :on-remove="handleRemove8" :on-success="handleAvatarSuccess" class="aaimg">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible" class="imgyl">
            <img w-full :src="dialogImageUrl" alt="Preview Image" class="imgyll" />
          </el-dialog>
        </div>
        <!-- 添加剂 -->
        <div>
          <table>
            <tr>
              <td>
                <span style="font-size: 13px;">添加剂</span>
              </td>
              <td>
                <el-button plain style="background-color: #F2F2F2;margin-left: 18px;width: 90px;margin-bottom: 15px;"
                  @change="statu = 3" @click="dialogSupp(aas = 3)">设置</el-button>
              </td>
            </tr>
            <tr>
              <td>生产批次:</td>
              <td v-for="item in Suppelist">
                <span v-if="item.suppType == '添加剂'">
                  {{ item.suppBatch }}
                </span>
              </td>
            </tr>
            <tr>
              <td>
                <span style="font-size: 14px;">相关材料</span>
              </td>
            </tr>
          </table>
          <hr>
          <!-- 添加剂添加相关材料 -->
          <el-upload v-model:file-list="fileList9" action="https://localhost:7281/api/UploadTuPian"
            list-type="picture-card" :on-preview="handlePictureCardPreview" @change="addTestModel.pTyper = 9"
            :on-remove="handleRemove9" :on-success="handleAvatarSuccess" class="aaimg">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible" class="imgyl">
            <img w-full :src="dialogImageUrl" alt="Preview Image" class="imgyll" />
          </el-dialog>
        </div>
        <!-- 包材 -->
        <div>
          <table>
            <tr>
              <td>
                <span style="font-size: 13px;">包材</span>
              </td>
              <td>
                <el-button plain style="background-color: #F2F2F2;margin-left: 18px;width: 90px;margin-bottom: 15px;"
                  @change="statu = 4" @click="dialogSupp(aas = 4)">设置</el-button>
              </td>
            </tr>
            <tr>
              <td>生产批次:</td>
              <td v-for="item in Suppelist"><span v-if="item.suppType == '包材'">
                  {{ item.suppBatch }}
                </span>
              </td>
            </tr>
            <tr>
              <td>
                <span style="font-size: 14px;">相关材料</span>
              </td>
            </tr>
          </table>
          <hr>
          <!-- 包材添加相关材料 -->
          <el-upload v-model:file-list="fileList10" action="https://localhost:7281/api/UploadTuPian"
            list-type="picture-card" :on-preview="handlePictureCardPreview" @change="addTestModel.pTyper = 10"
            :on-remove="handleRemove10" :on-success="handleAvatarSuccess" class="aaimg">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible" class="imgyl">
            <img w-full :src="dialogImageUrl" alt="Preview Image" class="imgyll" />
          </el-dialog>
        </div>
      </div>
      <!-- 供应商信息设置弹框 -->
      <div>
        <el-dialog v-model="dialogFormSupps" :title="'供应商信息-' + SuppObj.suppType" width="500" draggable="true">
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="SuppObj" :rules="ruless" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="生产批次" prop="suppBatch">
              <el-input v-model="SuppObj.suppBatch" show-word-limit maxlength="30" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitFormSupper(ruleFormRef)">
                保存
              </el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
    <!--企业信息 -->
    <div style="margin-bottom: 40px;">
      <div>
        <span style="color: #3791EB;">企业信息</span>
        <el-button plain style="background-color: #F2F2F2;margin-left: 18px;width: 90px;margin-bottom: 15px;"
          @click="dialogBreedEnter()">设置</el-button>
        <hr>
      </div>
      <div>
        <table>
          <tr>
            <td style="width: 300px;">公司名称 : {{ AddEnterObj.deepName }}</td>
            <td>
              生产许可证:{{ AddEnterObj.deepNumber }}
            </td>
          </tr>
        </table>
      </div>
      <!-- 企业信息设置弹框 -->
      <div>
        <el-dialog v-model="dialogFormEnter" title="企业信息" width="500" draggable="true">
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="AddEnterObj" :rules="rulesEnter"
            label-width="auto" class="demo-ruleForm" :size="formSizeEnter" status-icon>
            <el-form-item label="公司名称" prop="deepName">
              <el-input v-model="AddEnterObj.deepName" show-word-limit maxlength="30" />
            </el-form-item>
            <el-form-item label="生产许可证" prop="deepNumber">
              <el-input v-model="AddEnterObj.deepNumber" show-word-limit maxlength="500" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitFormEnter(ruleFormRef)">
                保存
              </el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
    <!--企业照片 -->
    <div style="margin-bottom: 40px;">
      <div>
        <span style="color: #3791EB;">企业照片</span>
        <hr>
        <el-upload v-model:file-list="fileListEnter" action="https://localhost:7281/api/UploadTuPian"
          list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemoveEnter"
          :on-success="handleAvatarSuccess" @change="addTestModel.pTyper = 11" class="aaimg">
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisible" class="imgyl">
          <img w-full :src="dialogImageUrl" alt="Preview Image" class="imgyll" />
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';
import { compile, computed, onMounted, reactive, ref, watch } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { useRouter, useRoute } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
import DepData from '@/stores/departmentData'
import { Delete, Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
//pini保存
const store = useCounterStore();
//跳转
const router = useRouter();
//跳转传参
const route = useRoute();



//#region 供应商信息

const dialogFormSupps = ref(false) //对话框开关

// 判断原料 分类名称 (原料1\辅料2\添加剂3\包材4)
const statu = ref(1)


//打开供应商信息对话框
const dialogSupp = (aas: any) => {
  //清空操作
  //判断原料
  if (statu.value == 1) {
    SuppObj.suppType = "原料"
    const aa: any = Suppelist.value.filter((x: any) => x.suppType == "原料")[0] == null ? "" : Suppelist.value.filter((x: any) => x.suppType == "原料")[0]
    console.log(aa, "aa")
    SuppObj.suppBatch = aa.suppBatch
  }
  if (aas == 2) {
    SuppObj.suppType = "辅料"
    const aa: any = Suppelist.value.filter((x: any) => x.suppType == "辅料")[0] == null ? "" : Suppelist.value.filter((x: any) => x.suppType == "辅料")[0]
    console.log(aa, "aa")
    SuppObj.suppBatch = aa.suppBatch
  }
  if (aas == 3) {
    SuppObj.suppType = "添加剂"
    const aa: any = Suppelist.value.filter((x: any) => x.suppType == "添加剂")[0] == null ? "" : Suppelist.value.filter((x: any) => x.suppType == "添加剂")[0]
    console.log(aa, "aa")
    SuppObj.suppBatch = aa.suppBatch
  }
  if (aas == 4) {
    SuppObj.suppType = "包材"
    const aa: any = Suppelist.value.filter((x: any) => x.suppType == "包材")[0] == null ? "" : Suppelist.value.filter((x: any) => x.suppType == "包材")[0]
    console.log(aa, "aa")
    SuppObj.suppBatch = aa.suppBatch
  }


  dialogFormSupps.value = true //打开对话框
}

//供应商信息效验
const ruless = reactive<FormRules>({
  // 供应商材料批次
  //   1、必填项
  //   2、允许输入任意字符（主要为中文、字母）
  //   3、不允许输入非特殊字符（如逗号、问号等）
  //   4、最多支持输入 30 位字符
  suppBatch: [
    { required: true, message: '必填项', trigger: 'blur' },
    { min: 0, max: 30, message: '最多支持输入 30 位字符', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '不允许输入非特殊字符（如逗号、问号等）', trigger: 'blur'
    },
  ],
})

//供应商信息对象
const SuppObj = reactive({
  "suppId": null, //主键
  "suppType": "", //分类名称 (原料\辅料\添加剂\包材)
  "suppBatch": "",  //供应商材料批次
  "traceaBatch": store.ccTrace.traceaBatch,  //生产批次
  "traceaIsDelete": false  //逻辑删除 false 未删除  true 删除
})


//添加深加工信息
const submitFormSupper = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post('https://localhost:7281/api/Trace/AddUpdateSupplier', SuppObj).then(res => {
        if (res.data.code === 220) {
          //设置成功
          ElMessage.success("设置成功")
        } else if (res.data.code === 221) {
          //设置失败
          ElMessage.success("设置失败")
        } else {
          //添加失败
          ElMessage.error("设置出错")
        }
        //刷新供应商数据
        showSuppe()
        dialogFormSupps.value = false //关闭对话框
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//存放供应商集合
const Suppelist = ref([]);

//显示反填供应商信息
const showSuppe = () => {
  axios.get(`https://localhost:7070/api/Trace/GetSupplier?TraceaBatch=${store.ccTrace.traceaBatch}&TraceaIsDelete=false`).then(res => {
    console.log(res.data.data, "显示反填供应商信息res")
    Suppelist.value = res.data.data
    console.log(Suppelist.value, "显示反填供应商信息")
  })
}



//#region 原料

//显示列表
const fileList7 = ref<UploadUserFile[]>([])

//显示原料信息图片
const footimg7 = () => {
  axios.get(`https://localhost:7070/api/Trace/GetTest?PTyper=7&TraceaBatch=${store.ccTrace.traceaBatch}&TraceaIsDelete=false`).then(res => {
    fileList7.value = res.data.data
  })
}

//删除原料图片
const handleRemove7: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  // console.log(uploadFile, "获取删除数据uploadFile")
  // console.log(uploadFiles, "获取删除数据uploadFiles")
  axios.get(`https://localhost:7281/api/Trace/DeleteTest?Url=${uploadFile.url}&PTyper=7&TraceaBatch=${store.ccTrace.traceaBatch}`).then(res => {
    if (res.data.code == 204) {
      ElMessage.success("图片删除成功")
    } else if (res.data.code = 205) {
      ElMessage.error("图片删除失败")
    } else {
      ElMessage.error("图片删除出现错误")
    }
  })
}

//#endregion

//#region 辅料


//显示列表
const fileList8 = ref<UploadUserFile[]>([])


//显示辅料信息图片
const footimg8 = () => {
  axios.get(`https://localhost:7070/api/Trace/GetTest?PTyper=8&TraceaBatch=${store.ccTrace.traceaBatch}&TraceaIsDelete=false`).then(res => {
    fileList8.value = res.data.data
  })
}

//删除辅料图片
const handleRemove8: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  // console.log(uploadFile, "获取删除数据uploadFile")
  // console.log(uploadFiles, "获取删除数据uploadFiles")
  axios.get(`https://localhost:7281/api/Trace/DeleteTest?Url=${uploadFile.url}&PTyper=8&TraceaBatch=${store.ccTrace.traceaBatch}`).then(res => {
    if (res.data.code == 204) {
      ElMessage.success("图片删除成功")
    } else if (res.data.code = 205) {
      ElMessage.error("图片删除失败")
    } else {
      ElMessage.error("图片删除出现错误")
    }
  })
}

//#endregion

//#region 添加剂


//显示列表
const fileList9 = ref<UploadUserFile[]>([])


//显示添加剂信息图片
const footimg9 = () => {
  axios.get(`https://localhost:7070/api/Trace/GetTest?PTyper=9&TraceaBatch=${store.ccTrace.traceaBatch}&TraceaIsDelete=false`).then(res => {
    fileList9.value = res.data.data
  })
}

//删除添加剂图片
const handleRemove9: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  // console.log(uploadFile, "获取删除数据uploadFile")
  // console.log(uploadFiles, "获取删除数据uploadFiles")
  axios.get(`https://localhost:7281/api/Trace/DeleteTest?Url=${uploadFile.url}&PTyper=9&TraceaBatch=${store.ccTrace.traceaBatch}`).then(res => {
    if (res.data.code == 204) {
      ElMessage.success("图片删除成功")
    } else if (res.data.code = 205) {
      ElMessage.error("图片删除失败")
    } else {
      ElMessage.error("图片删除出现错误")
    }
  })
}

//#endregion

//#region 包材


//显示列表
const fileList10 = ref<UploadUserFile[]>([])


//显示包材信息图片
const footimg10 = () => {
  axios.get(`https://localhost:7070/api/Trace/GetTest?PTyper=10&TraceaBatch=${store.ccTrace.traceaBatch}&TraceaIsDelete=false`).then(res => {
    fileList10.value = res.data.data
  })
}

//删除包材图片
const handleRemove10: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  // console.log(uploadFile, "获取删除数据uploadFile")
  // console.log(uploadFiles, "获取删除数据uploadFiles")
  axios.get(`https://localhost:7281/api/Trace/DeleteTest?Url=${uploadFile.url}&PTyper=10&TraceaBatch=${store.ccTrace.traceaBatch}`).then(res => {
    if (res.data.code == 204) {
      ElMessage.success("图片删除成功")
    } else if (res.data.code = 205) {
      ElMessage.error("图片删除失败")
    } else {
      ElMessage.error("图片删除出现错误")
    }
  })
}

//#endregion



//#endregion

//#region  企业信息

//添加企业表单
const AddEnterObj = reactive({
  "enterId": null,              //主键
  //////////////////////养殖企业信息////////////////////////////
  "breedName": null,            //养殖场
  "breedChargeName": null,      //负责人
  "breedNum": null,             //存栏数量
  //////////////////////屠宰企业信息////////////////////////////
  "slaughterName": null,        //公司名称
  "slaughterAdder": null,       //公司地址
  "slaughterProvinceId": null,  //省份
  "slaughterCityId": null,      //市
  "slaughterCountyId": null,    //县
  "slaughterCreteTime": null,   //成立时间
  "slaughterBrief": null,       //公司简介
  //////////////////////深加工企业信息////////////////////////////
  "deepName": "",             //深加工公司名称
  "deepNumber": "",           //生产许可证号
  //////////////////////公共字段////////////////////////////
  "traceaBatch": store.ccTrace.traceaBatch,          //生产批次
  "traceaIsDelete": false     // 逻辑删除 false 未删除  true 删除
})


const dialogFormEnter = ref(false) //对话框开关

const ruleFormRefEnter = ref<FormInstance>()
const formSizeEnter = ref<ComponentSize>('default')
//企业效验
const rulesEnter = reactive<FormRules>({
  // 公司名称
  //   1、必填项
  //   2、允许输入任意字符（主要为中文、字母）
  //   3、不允许输入非特殊字符（如逗号、问号等）
  //   4、最多支持输入 30 位字符
  deepName: [
    { required: true, message: '必填项', trigger: 'blur' },
    { min: 0, max: 30, message: '最多支持输入 30 位字符', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '不允许输入非特殊字符（如逗号、问号等）', trigger: 'blur'
    },
  ],
  //生产许可证
  deepNumber: [
    { required: true, message: '必填项', trigger: 'blur' },
    { min: 0, max: 100, message: '最多支持输入 100 位字符', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '不允许输入非特殊字符（如逗号、问号等）', trigger: 'blur'
    },
  ],
})

//打开企业对话框
const dialogBreedEnter = () => {
  //清空操作
  dialogFormEnter.value = true //打开对话框
}



//添加企业信息
const submitFormEnter = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post('https://localhost:7281/api/Trace/AddUpdateEnterprise', AddEnterObj).then(res => {
        if (res.data.code === 220) {
          //设置成功
          ElMessage.success("设置成功")
        } else if (res.data.code === 221) {
          //设置失败
          ElMessage.error("设置失败")
        } else {
          //添加失败
          ElMessage.error("设置出错")
        }
        dialogFormEnter.value = false //关闭对话框
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//显示反填企业信息
const showEnter = () => {
  axios.get(`https://localhost:7070/api/Trace/GetEnterprise?TraceaBatch=${store.ccTrace.traceaBatch}`).then(res => {
    console.log(res.data.data, "反填的饲养信息")
    AddEnterObj.deepName = res.data.data[0].deepName
    AddEnterObj.deepNumber = res.data.data[0].deepNumber

  })
}


//#endregion

//#region 企业图片
//储存企业图片列表
const fileListEnter = ref<UploadUserFile[]>([])

//企业图片显示
const imgshowEnter = () => {
  axios.get(`https://localhost:7070/api/Trace/GetTest?PTyper=11&TraceaBatch=${store.ccTrace.traceaBatch}&TraceaIsDelete=false`).then(res => {
    fileListEnter.value = res.data.data
  })
}

//删除企业图片
const handleRemoveEnter: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  // console.log(uploadFile, "获取删除数据uploadFile")
  // console.log(uploadFiles, "获取删除数据uploadFiles")
  axios.get(`https://localhost:7281/api/Trace/DeleteTest?Url=${uploadFile.url}&PTyper=11&TraceaBatch=${store.ccTrace.traceaBatch}`).then(res => {
    if (res.data.code == 204) {
      ElMessage.success("图片删除成功")
    } else if (res.data.code = 205) {
      ElMessage.error("图片删除失败")
    } else {
      ElMessage.error("图片删除出现错误")
    }
  })
}

//#endregion

//#region 食品安全信息信息

//预览开关
const dialogVisible = ref(false)
//预览图片路径
const dialogImageUrl = ref('')

//添加请求表单
const addTestModel = reactive({
  "url": "",
  "pTyper": 0,
  "traceaBatch": store.ccTrace.traceaBatch,
  "traceaIsDelete": false
})

//添加食品安全信息图片请求
const addTest = () => {
  axios.post('https://localhost:7281/api/Trace/AddTest', addTestModel).then(res => {
    if (res.data.code == 212) {
      // 添加成功
      ElMessage.success(res.data.msg)
    }
  })
}

//储存食品安全信息图片列表
const fileListfood = ref<UploadUserFile[]>([])

//显示食品安全信息图片
const footimgshow = () => {
  axios.get(`https://localhost:7070/api/Trace/GetTest?PTyper=6&TraceaBatch=${store.ccTrace.traceaBatch}&TraceaIsDelete=false`).then(res => {
    fileListfood.value = res.data.data
  })
}


//删除食品安全信息图片
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  // console.log(uploadFile, "获取删除数据uploadFile")
  // console.log(uploadFiles, "获取删除数据uploadFiles")
  axios.get(`https://localhost:7281/api/Trace/DeleteTest?Url=${uploadFile.url}&PTyper=6&TraceaBatch=${store.ccTrace.traceaBatch}`).then(res => {
    if (res.data.code == 204) {
      ElMessage.success("图片删除成功")
    } else if (res.data.code = 205) {
      ElMessage.error("图片删除失败")
    } else {
      ElMessage.error("图片删除出现错误")
    }
  })
}

//预览图片
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}

//#region 图片增加

//图片添加操作
//定义图片存放变量
const imageUrl = ref('')

//上传后获取数据url
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  addTestModel.url = response.imgss;
  console.log(response, '返回的图片数据')
  console.log(addTestModel.url, "上传图片获取路径")
  addTest()
}

//图片上传前操作
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  // if (rawFile.type !== 'image/jpeg') {
  //   ElMessage.error('Avatar picture must be JPG format!')
  //   return false
  // } else if (rawFile.size / 1024 / 1024 > 2) {
  //   ElMessage.error('Avatar picture size can not exceed 2MB!')
  //   return false
  // }
  return true
}

//#endregion



//#endregion

//#region 深加工信息设置

const dialogFormDeep = ref(false) //对话框开关
const formLabelWidth = '140px'

const ruleFormRef = ref<FormInstance>()
const formSize = ref<ComponentSize>('default')
//深加工效验
const rules = reactive<FormRules>({
  // 班组
  //   1、必填项
  //   2、允许输入任意字符（主要为中文、字母）
  //   3、不允许输入非特殊字符（如逗号、问号等）
  //   4、最多支持输入 30 位字符
  deepLeaderName: [
    { required: true, message: '必填项', trigger: 'blur' },
    { min: 0, max: 30, message: '最多支持输入 30 位字符', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '不允许输入非特殊字符（如逗号、问号等）', trigger: 'blur'
    },
  ],
  //负责人
  deppChargeName: [
    { required: true, message: '必填项', trigger: 'blur' },
    { min: 0, max: 30, message: '最多支持输入 30 位字符', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '不允许输入非特殊字符（如逗号、问号等）', trigger: 'blur'
    },
  ],
})

//打开深加工对话框
const dialogDeep = () => {
  //清空操作

  dialogFormDeep.value = true //打开对话框
}


//添加对象
const AddformDeep = reactive({
  "deepId": 0,
  "deepLeaderName": "", //班组
  "deppChargeName": "", //负责人
  "traceaBatch": store.ccTrace.traceaBatch,//生产批次
  "traceaIsDelete": false     //逻辑删除 false 未删除  true 删除
})

//添加深加工信息
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post('https://localhost:7281/api/Trace/AddUpdateDeep', AddformDeep).then(res => {
        if (res.data.code === 220) {
          //设置成功
          ElMessage.success("设置成功")
        } else if (res.data.code === 221) {
          //设置失败
          ElMessage.success("设置失败")
        } else {
          //添加失败
          ElMessage.error("设置出错")
        }
        dialogFormDeep.value = false //关闭对话框
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//显示反填深加工信息
const showBreed = () => {
  axios.get(`https://localhost:7070/api/Trace/GetDeep?TraceaBatch=${store.ccTrace.traceaBatch}`).then(res => {
    console.log(res.data.data, "反填的深加工信息")
    AddformDeep.deepLeaderName = res.data.data[0].deepLeaderName
    AddformDeep.deppChargeName = res.data.data[0].deppChargeName
  })
}

//#endregion





onMounted(() => {
  //显示深加工信息
  showBreed()
  //显示
  footimgshow()
  //企业照片显示
  imgshowEnter()
  //显示企业信息
  showEnter();
  //显示供应商信息
  showSuppe();
  //显示原料相关材料
  footimg7()
  //显示辅料相关材料
  footimg8()
  //显示添加剂相关材料
  footimg9()
  //显示包材相关材料
  footimg10()
})


</script>

<style scoped></style>